
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>
  
  <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'></script>
  

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$('a[id$="chartlink"]').hover(function() {
	//showId('http://research.investors.com/StockResearch/Scripts/miniChart/MiniChartFrame.htm?symbol='+$(this).attr('id').split("-")[1]+'&amp;type=daily&amp;displayRSLine=True');
	var chartSite = $(this).attr('id').split("-")[0];
	var symbol = $(this).attr('id').split("-")[1];
	var period = $(this).attr('id').split("-")[2];
    //$(document).mousemove(function(event) {
    if(chartSite == 'finviz'){
    	$('div#stockcharts-chart').hide(); // hide stockcharts window 
    	if(period =='daily'){
    		$('div#finviz-chart').replaceWith('<div id="finviz-chart"><iframe ID="miniChartHome" src="http://finviz.com/chart.ashx?t='+symbol+'&ty=c&ta=1&p=d&s=l" width="700" height="350" ></iframe></div>');
    	} else {
    		$('div#finviz-chart').replaceWith('<div id="finviz-chart"><iframe ID="miniChartHome" src="http://finviz.com/chart.ashx?t='+symbol+'&ty=c&ta=0&p=w" width="700" height="350" ></iframe></div>');
    	}
    	$('div#finviz-chart').css({"position":"absolute","left":'0%' ,"top":event.clientY+20 }).show(); 
    } else if(chartSite == 'ibd'){
    	$('div#ibd-chart').replaceWith('<div id="ibd-chart"><iframe ID="miniChartHome" src="http://research.investors.com/StockResearch/Scripts/miniChart/MiniChartFrame.htm?symbol='+symbol+'&amp;type='+period+'&amp;displayRSLine=True" width="700" height="350" frameborder="0" scrolling="no" allowtransparency="true"></iframe></div>');

    	$('div#ibd-chart').css({"position":"absolute","left":'50%' ,"top":event.clientY+20 }).show(); 
    } else if (chartSite == 'stockcharts'){

    	$('div#finviz-chart').hide(); // hide finviz 
    		$('div#stockcharts-chart').replaceWith('<div id="stockcharts-chart"><iframe ID="miniChartHome" src="http://stockcharts.com/c-sc/sc?s='+symbol+'&p='+period.charAt(0)+'&b=5&g=0&i=t75946787218&r=1413226043177&inspector=yes" width="700" height="350" ></iframe></div>');
    	$('div#stockcharts-chart').css({"position":"absolute","left":'0%' ,"top":event.clientY+20 }).show(); 
		
    }
   
    //});    
});


//end movement with click on the div.
$(document).bind("click",function(){
    //$(document).unbind("mousemove");
    $('div[id$="-chart"]').hide();
});
$(document).keyup(function(e) {
  if (e.keyCode == 27) { 
    //$(document).unbind("mousemove");
    $('div[id$="-chart"]').hide();
  }   // esc
});

});//]]>  

      function showId(id){
        //alert(id);
        //window.open(id);
      }

</script>
</head>
<body>
<body>
  </div>
    <!-- HIDDEN / POP-UP DIV -->
    <div id="ibd-chart"></div>
    <div id="finviz-chart"></div>
    <div id="stockcharts-chart"></div>

  <div id="container">

<table border="1" cellpadding="1" cellspacing="1" style="width: 500px;">
	<thead>
		<tr>
			<th scope="col">Symbol</th>
			<th scope="col">IBD Parameters</th>
			<th colspan="2" rowspan="1" scope="col">Finviz Chart</th>
			<th colspan="2" rowspan="1" scope="col">Stockcharts.com Chart</th>
			<th colspan="2" rowspan="1" scope="col">IBD Chart</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>BIIB</td>
			<td>&nbsp;</td>
			<td><a href="#" id="finviz-BIIB-daily-chartlink">daily</a></td>
			<td><a href="#" id="finviz-BIIB-weekly-chartlink">weekly</a></td>
			<td><a href="#" id="stockcharts-BIIB-daily-chartlink">daily</a></td>
			<td><a href="#" id="stockcharts-BIIB-weekly-chartlink">weekly</a></td>			
			<td><a href="#" id="ibd-BIIB-daily-chartlink">daily</a></td>
			<td><a href="#" id="ibd-BIIB-weekly-chartlink">weekly</a></td>
		</tr>
		<tr>
			<td>NFLX</td>
			<td>&nbsp;</td>
			<td><a href="#" id="finviz-NFLX-daily-chartlink">daily</a></td>
			<td><a href="#" id="finviz-NFLX-weekly-chartlink">weekly</a></td>
			<td><a href="#" id="stockcharts-NFLX-daily-chartlink">daily</a></td>
			<td><a href="#" id="stockcharts-NFLX-weekly-chartlink">weekly</a></td>			
			<td><a href="#" id="ibd-NFLX-daily-chartlink">daily</a></td>
			<td><a href="#" id="ibd-NFLX-weekly-chartlink">weekly</a></td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
	</tbody>
</table>
</body>
</html>